<template>
  <div class="camera-management-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>摄像头管理</h2>
      <p>管理系统中的所有摄像头设备信息</p>
    </div>

    <!-- 统计概览 -->
    <div class="stats-overview">
      <div class="stats-card primary">
        <div class="stats-icon">
          <el-icon><VideoCamera /></el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-value">{{ stats.total }}</div>
          <div class="stats-label">设备总数</div>
        </div>
      </div>
      <div class="stats-card success">
        <div class="stats-icon">
          <el-icon><Check /></el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-value">{{ stats.normal }}</div>
          <div class="stats-label">正常运行</div>
        </div>
      </div>
      <div class="stats-card warning">
        <div class="stats-icon">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-value">{{ stats.maintenance }}</div>
          <div class="stats-label">维护中</div>
        </div>
      </div>
      <div class="stats-card danger">
        <div class="stats-icon">
          <el-icon><Close /></el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-value">{{ stats.repair }}</div>
          <div class="stats-label">维修中</div>
        </div>
      </div>
    </div>

    <!-- 操作区域 -->
    <div class="operation-section">
      <el-card class="search-card">
        <div class="search-header">
          <h3>搜索条件</h3>
          <el-button type="info" plain @click="handleReset">重置</el-button>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="searchForm.deviceName"
              placeholder="设备名称"
              clearable
              prefix-icon="Search"
            />
          </el-col>
          <el-col :span="6">
            <el-input
              v-model="searchForm.deviceCode"
              placeholder="设备编码"
              clearable
              prefix-icon="Document"
            />
          </el-col>
          <el-col :span="6">
            <el-input
              v-model="searchForm.address"
              placeholder="小区名称"
              clearable
              prefix-icon="Location"
            />
          </el-col>
          <el-col :span="6">
            <el-button type="primary" class="search-btn" @click="handleSearch">
              <el-icon><Search /></el-icon>搜索
            </el-button>
          </el-col>
        </el-row>
      </el-card>

      <div class="toolbar">
        <el-button type="primary" class="toolbar-btn" @click="showAddDialog">
          <el-icon><Plus /></el-icon>新增摄像头
        </el-button>
        <el-button class="toolbar-btn" @click="loadCameraList">
          <el-icon><Refresh /></el-icon>刷新
        </el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        stripe
        class="camera-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          prop="deviceName"
          label="设备名称"
          min-width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-link type="primary" @click="handleView(scope.row)">{{
              scope.row.deviceName
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="deviceCode" label="设备编码" min-width="140" />
        <el-table-column
          prop="address"
          label="小区名称"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="success">正常</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="warning"
              >维护中</el-tag
            >
            <el-tag v-else type="danger">维修中</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="manufacturer" label="制造商" min-width="120" />
        <el-table-column prop="responsiblePerson" label="负责人" width="100" />
        <el-table-column
          prop="installDate"
          label="安装日期"
          width="160"
          align="center"
        >
          <template #default="scope">
            <span>{{
              scope.row.installDate ? formatDate(scope.row.installDate) : "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template #default="scope">
            <div class="action-buttons">
              <el-button
                size="small"
                type="primary"
                link
                @click="handleView(scope.row)"
              >
                查看
              </el-button>
              <el-button
                size="small"
                type="warning"
                link
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                size="small"
                type="danger"
                link
                @click="handleDeleteWithCheck(scope.row)"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="70%"
      :close-on-click-modal="false"
      class="camera-dialog"
    >
      <el-form
        ref="formRef"
        :model="cameraForm"
        :rules="formRules"
        label-width="100px"
        class="camera-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input
                v-model="cameraForm.deviceName"
                placeholder="请输入设备名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编码" prop="deviceCode">
              <el-input
                v-model="cameraForm.deviceCode"
                placeholder="请输入设备编码"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="小区名称" prop="address">
              <el-input
                v-model="cameraForm.address"
                placeholder="请输入小区名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装地址" prop="installAddress">
              <el-input
                v-model="cameraForm.installAddress"
                placeholder="请输入安装地址"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="方向" prop="orientation">
              <el-input
                v-model="cameraForm.orientation"
                placeholder="请输入方向"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分辨率" prop="resolution">
              <el-input
                v-model="cameraForm.resolution"
                placeholder="请输入分辨率"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="内存" prop="memory">
              <el-input
                v-model="cameraForm.memory"
                placeholder="请输入内存大小"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SSD容量" prop="ssdCapacity">
              <el-input
                v-model="cameraForm.ssdCapacity"
                placeholder="请输入SSD容量"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="CPU" prop="cpu">
              <el-input v-model="cameraForm.cpu" placeholder="请输入CPU型号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备状态" prop="status">
              <el-select
                v-model="cameraForm.status"
                placeholder="请选择设备状态"
                style="width: 100%"
              >
                <el-option :value="0" label="正常" />
                <el-option :value="1" label="维护中" />
                <el-option :value="2" label="维修中" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="安装日期" prop="installDate">
              <el-date-picker
                v-model="cameraForm.installDate"
                type="date"
                placeholder="请选择安装日期"
                style="width: 100%"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="responsiblePerson">
              <el-input
                v-model="cameraForm.responsiblePerson"
                placeholder="请输入负责人"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="制造商" prop="manufacturer">
              <el-input
                v-model="cameraForm.manufacturer"
                placeholder="请输入制造商"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制造商电话" prop="manufacturerPhone">
              <el-input
                v-model="cameraForm.manufacturerPhone"
                placeholder="请输入制造商电话"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="维护单位" prop="maintenanceUnit">
              <el-input
                v-model="cameraForm.maintenanceUnit"
                placeholder="请输入维护单位"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维护电话" prop="maintenanceUnitPhone">
              <el-input
                v-model="cameraForm.maintenanceUnitPhone"
                placeholder="请输入维护单位电话"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="cameraForm.remarks"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="submitLoading"
            @click="handleSubmit"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="摄像头详情"
      width="60%"
      class="view-dialog"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备名称">{{
          viewCamera.deviceName
        }}</el-descriptions-item>
        <el-descriptions-item label="设备编码">{{
          viewCamera.deviceCode
        }}</el-descriptions-item>
        <el-descriptions-item label="小区名称">{{
          viewCamera.address
        }}</el-descriptions-item>
        <el-descriptions-item label="安装地址">{{
          viewCamera.installAddress
        }}</el-descriptions-item>
        <el-descriptions-item label="方向">{{
          viewCamera.orientation
        }}</el-descriptions-item>
        <el-descriptions-item label="分辨率">{{
          viewCamera.resolution
        }}</el-descriptions-item>
        <el-descriptions-item label="内存">{{
          viewCamera.memory
        }}</el-descriptions-item>
        <el-descriptions-item label="SSD容量">{{
          viewCamera.ssdCapacity
        }}</el-descriptions-item>
        <el-descriptions-item label="CPU">{{
          viewCamera.cpu
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag v-if="viewCamera.status === 0" type="success">正常</el-tag>
          <el-tag v-else-if="viewCamera.status === 1" type="warning"
            >维护中</el-tag
          >
          <el-tag v-else type="danger">维修中</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="安装日期">
          {{
            viewCamera.installDate ? formatDate(viewCamera.installDate) : "-"
          }}
        </el-descriptions-item>
        <el-descriptions-item label="负责人">{{
          viewCamera.responsiblePerson
        }}</el-descriptions-item>
        <el-descriptions-item label="制造商">{{
          viewCamera.manufacturer
        }}</el-descriptions-item>
        <el-descriptions-item label="制造商电话">{{
          viewCamera.manufacturerPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="维护单位">{{
          viewCamera.maintenanceUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="维护电话">{{
          viewCamera.maintenanceUnitPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{
          viewCamera.remarks
        }}</el-descriptions-item>
      </el-descriptions>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Plus,
  Search,
  Refresh,
  VideoCamera,
  Check,
  Warning,
  Close,
  Document,
  Location
} from "@element-plus/icons-vue";
import moment from "moment";
import type {
  Camera,
  CameraQuery,
  CameraAdd,
  CameraUpdate
} from "@/api/camera";
import {
  getCameraList,
  getCameraDetail,
  addCamera,
  updateCamera,
  deleteCamera
} from "@/api/camera";

// 定义组件名称
defineOptions({ name: "CameraManagement" });

// 状态管理
const loading = ref(false);
const dialogVisible = ref(false);
const viewDialogVisible = ref(false);
const dialogTitle = ref("新增摄像头");
const formRef = ref();
const submitLoading = ref(false);
const multipleSelection = ref<Camera[]>([]);

// 统计数据
const stats = reactive({
  total: 0,
  normal: 0,
  maintenance: 0,
  repair: 0
});

// 搜索表单
const searchForm = reactive<CameraQuery>({
  page: 1,
  limit: 10,
  deviceName: "",
  deviceCode: "",
  address: ""
});

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 表格数据
const tableData = ref<Camera[]>([]);

// 表单数据
const cameraForm = reactive<Camera>({
  address: "",
  status: 0,
  deviceName: "",
  installAddress: "",
  maintenancePeriod: "",
  orientation: "",
  deviceCode: "",
  resolution: "",
  memory: "",
  ssdCapacity: "",
  installDate: "",
  cpu: "",
  manufacturer: "",
  manufacturerAddress: "",
  manufacturerPhone: "",
  responsiblePerson: "",
  maintenanceUnit: "",
  maintenanceUnitPhone: "",
  maintenanceUnitAddress: "",
  equipmentMaintainer: "",
  registrationDate: "",
  remarks: ""
});

// 查看的摄像头数据
const viewCamera = reactive<Camera>({
  address: "",
  status: 0,
  deviceName: "",
  installAddress: "",
  maintenancePeriod: "",
  orientation: "",
  deviceCode: "",
  resolution: "",
  memory: "",
  ssdCapacity: "",
  installDate: "",
  cpu: "",
  manufacturer: "",
  manufacturerAddress: "",
  manufacturerPhone: "",
  responsiblePerson: "",
  maintenanceUnit: "",
  maintenanceUnitPhone: "",
  maintenanceUnitAddress: "",
  equipmentMaintainer: "",
  registrationDate: "",
  remarks: ""
});

// 表单验证规则
const formRules = reactive({
  deviceName: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
  deviceCode: [{ required: true, message: "请输入设备编码", trigger: "blur" }],
  address: [{ required: true, message: "请输入小区名称", trigger: "blur" }],
  installAddress: [
    { required: true, message: "请输入安装地址", trigger: "blur" }
  ],
  status: [{ required: true, message: "请选择设备状态", trigger: "change" }],
  manufacturer: [{ required: true, message: "请输入制造商", trigger: "blur" }],
  responsiblePerson: [
    { required: true, message: "请输入负责人", trigger: "blur" }
  ]
});

// 格式化日期
const formatDate = (date: string) => {
  if (!date) return "";
  return moment(date).format("YYYY-MM-DD");
};

// 生命周期
onMounted(() => {
  loadCameraList();
});

// 加载摄像头列表
const loadCameraList = async () => {
  loading.value = true;
  try {
    const params: CameraQuery = {
      ...searchForm,
      page: pagination.currentPage,
      limit: pagination.pageSize
    };
    const res = await getCameraList(params);
    if (res.code === 0 && res.data) {
      tableData.value = res.data.list || [];
      pagination.total = res.data.total || 0;

      // 更新统计数据
      stats.total = res.data.total || 0;
      stats.normal = tableData.value.filter(item => item.status === 0).length;
      stats.maintenance = tableData.value.filter(
        item => item.status === 1
      ).length;
      stats.repair = tableData.value.filter(item => item.status === 2).length;
    } else {
      ElMessage.error(res.message || "获取摄像头列表失败");
    }
  } catch (error) {
    console.error("获取摄像头列表失败:", error);
    ElMessage.error("获取摄像头列表失败");
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1;
  loadCameraList();
};

// 重置
const handleReset = () => {
  searchForm.deviceName = "";
  searchForm.deviceCode = "";
  searchForm.address = "";
  handleSearch();
};

// 分页大小变化
const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  loadCameraList();
};

// 当前页变化
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  loadCameraList();
};

// 多选处理
const handleSelectionChange = (val: Camera[]) => {
  multipleSelection.value = val;
};

// 显示新增对话框
const showAddDialog = () => {
  dialogTitle.value = "新增摄像头";
  dialogVisible.value = true;
  resetForm();
};

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  Object.assign(cameraForm, {
    address: "",
    status: 0,
    deviceName: "",
    installAddress: "",
    maintenancePeriod: "",
    orientation: "",
    deviceCode: "",
    resolution: "",
    memory: "",
    ssdCapacity: "",
    installDate: "",
    cpu: "",
    manufacturer: "",
    manufacturerAddress: "",
    manufacturerPhone: "",
    responsiblePerson: "",
    maintenanceUnit: "",
    maintenanceUnitPhone: "",
    maintenanceUnitAddress: "",
    equipmentMaintainer: "",
    registrationDate: "",
    remarks: ""
  });
};

// 查看摄像头 - 增加ID检查
const handleView = async (row: Camera) => {
  // 检查ID是否有效
  if (!row.id || isNaN(Number(row.id))) {
    ElMessage.error("无效的摄像头ID");
    return;
  }

  try {
    const response = await getCameraDetail(Number(row.id));
    if (response.code === 0 && response.data) {
      Object.assign(viewCamera, response.data);
      viewDialogVisible.value = true;
    } else {
      ElMessage.error(response.message || "获取摄像头详情失败");
    }
  } catch (error) {
    console.error("获取摄像头详情异常:", error);
    ElMessage.error("获取摄像头详情失败");
  }
};

// 编辑摄像头 - 增加ID检查
const handleEdit = async (row: Camera) => {
  // 检查ID是否有效
  if (!row.id || isNaN(Number(row.id))) {
    ElMessage.error("无效的摄像头ID");
    return;
  }

  try {
    const response = await getCameraDetail(Number(row.id));
    if (response.code === 0 && response.data) {
      Object.assign(cameraForm, response.data);
      dialogTitle.value = "编辑摄像头";
      dialogVisible.value = true;
    } else {
      ElMessage.error(response.message || "获取摄像头详情失败");
    }
  } catch (error) {
    console.error("获取摄像头详情异常:", error);
    ElMessage.error("获取摄像头详情失败");
  }
};

// 删除摄像头 - 增加ID检查
const handleDeleteWithCheck = (row: Camera) => {
  // 检查ID是否有效
  if (!row.id || isNaN(Number(row.id))) {
    ElMessage.error("无效的摄像头ID");
    return;
  }

  handleDelete(Number(row.id));
};

// 删除摄像头
const handleDelete = (id: number) => {
  ElMessageBox.confirm("确定要删除该摄像头吗？删除后无法恢复。", "确认删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      try {
        const response = await deleteCamera(id);
        if (response.code === 0) {
          ElMessage.success("删除成功");
          loadCameraList();
        } else {
          ElMessage.error(response.message || "删除失败");
        }
      } catch (error) {
        console.error("删除摄像头异常:", error);
        ElMessage.error("删除失败");
      }
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return;

  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      submitLoading.value = true;
      try {
        let response;
        if (dialogTitle.value === "新增摄像头") {
          // 创建添加参数对象
          const addData: CameraAdd = {
            address: cameraForm.address,
            status: cameraForm.status,
            deviceName: cameraForm.deviceName,
            installAddress: cameraForm.installAddress,
            maintenancePeriod: cameraForm.maintenancePeriod,
            orientation: cameraForm.orientation,
            deviceCode: cameraForm.deviceCode,
            resolution: cameraForm.resolution,
            memory: cameraForm.memory,
            ssdCapacity: cameraForm.ssdCapacity,
            installDate: cameraForm.installDate,
            cpu: cameraForm.cpu,
            manufacturer: cameraForm.manufacturer,
            manufacturerAddress: cameraForm.manufacturerAddress,
            manufacturerPhone: cameraForm.manufacturerPhone,
            responsiblePerson: cameraForm.responsiblePerson,
            maintenanceUnit: cameraForm.maintenanceUnit,
            maintenanceUnitPhone: cameraForm.maintenanceUnitPhone,
            maintenanceUnitAddress: cameraForm.maintenanceUnitAddress,
            equipmentMaintainer: cameraForm.equipmentMaintainer,
            registrationDate: cameraForm.registrationDate,
            remarks: cameraForm.remarks
          };
          response = await addCamera(addData);
        } else {
          // 创建更新参数对象
          const updateData: CameraUpdate = {
            id: cameraForm.id!,
            address: cameraForm.address,
            status: cameraForm.status,
            deviceName: cameraForm.deviceName,
            installAddress: cameraForm.installAddress,
            maintenancePeriod: cameraForm.maintenancePeriod,
            orientation: cameraForm.orientation,
            deviceCode: cameraForm.deviceCode,
            resolution: cameraForm.resolution,
            memory: cameraForm.memory,
            ssdCapacity: cameraForm.ssdCapacity,
            installDate: cameraForm.installDate,
            cpu: cameraForm.cpu,
            manufacturer: cameraForm.manufacturer,
            manufacturerAddress: cameraForm.manufacturerAddress,
            manufacturerPhone: cameraForm.manufacturerPhone,
            responsiblePerson: cameraForm.responsiblePerson,
            maintenanceUnit: cameraForm.maintenanceUnit,
            maintenanceUnitPhone: cameraForm.maintenanceUnitPhone,
            maintenanceUnitAddress: cameraForm.maintenanceUnitAddress,
            equipmentMaintainer: cameraForm.equipmentMaintainer,
            registrationDate: cameraForm.registrationDate,
            remarks: cameraForm.remarks
          };
          response = await updateCamera(updateData);
        }

        if (response.code === 0) {
          ElMessage.success(
            dialogTitle.value === "新增摄像头" ? "新增成功" : "更新成功"
          );
          dialogVisible.value = false;
          loadCameraList();
        } else {
          ElMessage.error(
            response.message ||
              (dialogTitle.value === "新增摄像头" ? "新增失败" : "更新失败")
          );
        }
      } catch (error) {
        console.error(
          dialogTitle.value === "新增摄像头"
            ? "新增摄像头异常:"
            : "更新摄像头异常:",
          error
        );
        ElMessage.error(
          dialogTitle.value === "新增摄像头" ? "新增失败" : "更新失败"
        );
      } finally {
        submitLoading.value = false;
      }
    }
  });
};
</script>

<style scoped lang="scss">
.camera-management-page {
  padding: 20px;
  background-color: #f5f6f7;
  min-height: calc(100vh - 80px);

  .page-header {
    margin-bottom: 20px;

    h2 {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 8px;
    }

    p {
      font-size: 14px;
      color: #606266;
    }
  }

  .stats-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;

    .stats-card {
      display: flex;
      align-items: center;
      padding: 20px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
      }

      &.primary {
        border-left: 4px solid #409eff;
      }

      &.success {
        border-left: 4px solid #67c23a;
      }

      &.warning {
        border-left: 4px solid #e6a23c;
      }

      &.danger {
        border-left: 4px solid #f56c6c;
      }

      .stats-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        .el-icon {
          font-size: 24px;
          color: #fff;
        }
      }

      .primary .stats-icon {
        background-color: #409eff;
      }

      .success .stats-icon {
        background-color: #67c23a;
      }

      .warning .stats-icon {
        background-color: #e6a23c;
      }

      .danger .stats-icon {
        background-color: #f56c6c;
      }

      .stats-content {
        flex: 1;

        .stats-value {
          font-size: 24px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 4px;
        }

        .stats-label {
          font-size: 14px;
          color: #606266;
        }
      }
    }
  }

  .operation-section {
    margin-bottom: 20px;

    .search-card {
      margin-bottom: 16px;

      .search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        h3 {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
        }
      }

      :deep(.el-row) {
        .el-col {
          margin-bottom: 16px;
        }
      }

      .search-btn {
        width: 100%;
        height: 32px;
      }
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .toolbar-btn {
        height: 36px;
      }
    }
  }

  .table-card {
    .camera-table {
      :deep(.el-table__header th) {
        background-color: #f5f7fa;
        color: #606266;
        font-weight: 500;
      }

      :deep(.el-table__row:hover) {
        cursor: pointer;
      }
    }

    .action-buttons {
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .pagination-container {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      padding: 16px 0;
    }
  }

  .camera-dialog {
    :deep(.el-dialog__body) {
      max-height: 70vh;
      overflow-y: auto;
    }

    .camera-form {
      :deep(.el-form-item) {
        margin-bottom: 18px;
      }
    }
  }

  .view-dialog {
    :deep(.el-descriptions__label) {
      width: 120px;
      font-weight: 500;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 0;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .camera-management-page {
    .stats-overview {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 768px) {
  .camera-management-page {
    padding: 12px;

    .stats-overview {
      grid-template-columns: 1fr;
    }

    .operation-section {
      .toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
      }
    }
  }
}
</style>
